<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/vue.js"></script>
    <title>TodoList</title>
</head>

<body>
    <div id="app">
        <div style="height: 70px;">
            <div class="head">
                <div class="head-wrapper w">
                    <h1>ToDoList</h1>
                    <input type="text" class="add-input" @keyup.enter="addNew" v-model="content" placeholder="输入待完成项   回车结束">
                </div>
            </div>
        </div>

            <div class="body w">
                <ul class="w" >
                    <li v-for="item,index in list">
                        <p class="content">{{item.content}}</p>
                        <p class="time">{{item.date}}</p>
                        <button class="delete" @click="deleteItem(index)">X</button>
                    </li>
                </ul>
            </div>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            time: "",
            temp: "",
            content: "",
            list: [],
        },
        methods: {
            addNew: function () {
              if(this.content.trim() === "") return;
                let date = new Date();
                let nowTime =  `${date.getMonth() + 1}月${date.getDate()}日   ${date.getHours() < 10 ? "0" + date.getHours() : date.getHours()}:${date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()}:${date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()}`
                this.list.push({content:this.content,date:nowTime});
                this.content = ""
                localStorage.setItem("list", JSON.stringify(this.list))
            },
            deleteItem:function(index) {
                this.list.splice(index,1)
                localStorage.setItem("list", JSON.stringify(this.list))

            }
        },
        mounted: function () {
            this.list = JSON.parse(localStorage.getItem("list"));
            if (!this.list) this.list = [];
        }
    })

</script>

</html>